<template>
  <!-- 微信小程序 隐私新规相关代码 -->
  <UniPopup ref="privacyPopupRef" :z-index="999" :isMaskClick="false">
    <view class="privacy-popup">
      <view class="modal-title">提示</view>
      <view class="modal-content">
        <view>在您使用前请仔细阅读,</view>
        <view style="color: #2878ff" @click="openPrivacyContract">{{ privacyContractName }}</view>
        <view>如果您同意,请点击"同意"继续使用</view>
      </view>
      <view class="modal-bottom">
        <button v-if="showCancel" class="bottom-btn cancel" type="none" @click="handleCancel">
          取消
        </button>
        <button
          class="bottom-btn submit"
          type="none"
          id="agree-btn"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          同意
        </button>
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { getCurrentInstance, watch, onMounted, ref } from 'vue';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { storeToRefs } from 'pinia';
  import { DynamicTabbarPagesEnum } from '@/enums/pageEnum';
  import { getUrlName } from '@/router';

  const { tabbarList } = useAppStoreWithOut();

  const showCancel = ref(true);

  const pageList = getCurrentPages();
  const currentPageUrl = pageList[pageList.length - 1].route;
  const isBaseUrl = currentPageUrl?.includes('base');
  const currentPageName = getUrlName(currentPageUrl);

  if (isBaseUrl) {
    let item = tabbarList.find((v) => v.pagePath === currentPageName);
    if (item?.component === DynamicTabbarPagesEnum.BASE_CONTACTSMAP) showCancel.value = false;
  }

  const useApp = useAppStoreWithOut();
  const privacyContractName = ref('隐私保护指引');
  const isOpen = ref(false);
  const { privacyPopupVisible } = storeToRefs(useApp);

  const watchCallback = (val: boolean) => {
    isOpen.value = val;
    val ? openPopup() : closePopup();
  };

  watch(privacyPopupVisible, watchCallback);

  onMounted(() => {
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: (res) => {
          if (res.needAuthorization) {
            privacyContractName.value = res.privacyContractName;
          }
        },
      });
    }

    if (isOpen.value !== privacyPopupVisible.value) {
      watchCallback(privacyPopupVisible.value);
    }
  });

  const _this = getCurrentInstance();
  const openPopup = (direction: string = 'center') => {
    (_this?.refs['privacyPopupRef'] as any).open(direction);
  };

  const closePopup = (direction: string = 'center') => {
    useApp.setPrivacyPopupVisible(false);
    (_this?.refs['privacyPopupRef'] as any).close(direction);
  };

  function handleCancel() {
    useApp.resolvePrivacyAuthorization?.({ event: 'disagree' });
    closePopup();
    console.log('handleCancel');
  }

  function handleAgreePrivacyAuthorization() {
    useApp.resolvePrivacyAuthorization?.({ buttonId: 'agree-btn', event: 'agree' });
    console.log('handleAgreePrivacyAuthorization');
    closePopup();
  }

  /** 跳转至隐私协议页面 */
  function openPrivacyContract() {
    if (wx.openPrivacyContract) {
      wx.openPrivacyContract({
        success: () => {},
        fail: () => {},
        complete: () => {},
      });
    }
  }
</script>

<style lang="scss" scoped>
  .privacy-popup {
    width: 600rpx;
    min-height: 326rpx;
    border-radius: 32rpx;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .modal-title {
      padding-top: 42rpx;
      flex-shrink: 0;
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }
    .modal-content {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      flex: 1;
      font-size: 28rpx;
      color: #808080;
    }
    .modal-bottom {
      height: 96rpx;
      flex-shrink: 0;
      border-top: 1px solid #ebedf0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      .bottom-btn {
        height: 96rpx;
        line-height: 96rpx;
        flex: 1;
        text-align: center;
        color: #2878ff;
        font-size: 32rpx;
        border-radius: 0;
        &:active {
          background-color: rgba($color: #000000, $alpha: 0.1);
        }
      }
      .cancel {
        border-right: 1px solid #ebedf0;
      }
    }
  }
</style>
